<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

const ruleFrom = reactive({
  qrCodeBGPicUrl: '',
})

// 验证规则
const rules = reactive({
  qrCodeBGPicUrl: [
    { required: true, message: '请输入标题', trigger: 'blur' },
  ],
})

async function SubmitData(formEl: FormInstance | undefined) {
  if (!formEl) {
    return
  }
  await formEl.validate((valid) => {
    if (valid) {
      // console.log('submit!')
      ElMessage.success('提交成功')
    }
  })
}

onMounted(() => {

})
</script>

<template>
  <div>
    <PageHeader title="首页配置" />
    <ElForm ref="ruleFormRef" label-position="right" label-width="80px" :rules="rules" :model="ruleFrom">
      <PageMain title="会员跳转链接">
        <el-space wrap :size="20">
          <ElRow :gutter="20">
            <ElCol :md="8">
              1
            </ElCol>
          </ElRow>
        </el-space>
      </PageMain>
    </ElForm>
    <div style="height: 90px;" />
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="SubmitData(ruleFormRef)">
        提交
      </ElButton>
    </FixedActionBar>
  </div>
</template>

<style scoped>
/* stylelint-disable-next-line no-empty-source */
</style>
